import React, { Component } from 'react'
import { Button, Input, message } from 'antd'
import { UdModal, IUdModalContentProps } from '../../../../index'

const Demo = () => {
  return <Button type="primary" onClick={openCustomModal}>打开弹窗</Button>
}

const openCustomModal = () => {
  UdModal.open({
    title: "自定义组件",
    content: <CustomComponents />,
    onOk: (value) => {
      message.success('Input的值：' + value)
    },
    onCancel: () => {
      message.error('关闭弹窗')
    }
  })
}

class CustomComponents extends Component<IUdModalContentProps, ICustomComponentsState> {
  constructor(props) {
    super(props)
    this.state = {
      value: ''
    }
    this.props.getHandler(this.getVal)
  }

  render() {
    return (
      <div>
        内容:
        <Input onChange={this.onChange} placeholder="请输入内容" value={this.state.value} />
      </div>
    )
  }

  protected onChange = (e) => {
    this.setState({
      value: e.target.value
    })
  }

  protected getVal = () => {
    return this.state.value
  }
}

interface ICustomComponentsState {
  value: string
}

export default Demo
